<template>
  <div class="mt-10"></div>
  <el-row >

    <el-col :span="12" class=" flex justify-end" style="height: calc(70vh)">
      <div class="tab_s mr-20">
        <transition>
        <img v-if="el" @mouseover="show_info" src="../../components/icon/disk.ico" size="60" alt="Big Boat">
      </transition>
    </div>
    </el-col>

    <el-col :span="12" class=" flex" style="height: calc(70vh)">
    <div class="tab_s">
      <transition>
        <div v-if="el2">
        <el-row v-for="(v,k) in info.data" class="mt-4">
                <el-col :span="11" class="tab_s">{{info.zh[k]}}</el-col>
                <el-col :span="12"><el-input disabled  v-model="info.data[k]" style="width: 220px" /></el-col>
        </el-row>

        <!-- <el-row class="mt-2 min-h-20" style="align-items: flex-end">
            <el-col :span="12" class="mb-5 ml-8">
                <el-progress :text-inside="true" :stroke-width="20" :percentage="percentage" :color="customColors"/>
            </el-col>
        </el-row>

        <div>
          <el-button-group>
            <el-button :icon="Minus" @click="decrease"></el-button>
            <el-button :icon="Plus" @click="increase"></el-button>
          </el-button-group>
        </div> -->
      </div>

    </transition>

    </div>
    </el-col>

  </el-row>
  
    
</template>

<script setup>
import { ref ,onMounted,onUnmounted} from 'vue'
import { Minus, Plus } from '@element-plus/icons-vue'
  const info = ref(
    {
      zh: {
        DeviceId:'设备Id',
        IP:'IP',
        MAC:'MAC',
        WebVersion:'Web版本',
        FirmwareVersion:'固件版本',
        DriveVersion:'驱动版本',
        ModuleVersion:'模块版本',
        ChannelNumber:'通道数',
        StorageMethod:'存储方式',
        TotalSpace:'总空间',
        RemainingSpace:'剩余空间',
      },
      data:{
        DeviceId:'2023199501002',
        IP:'192.168.1.12',
        MAC:'0F:00:A0:00:00:01',
        WebVersion:'1.0.3',
        FirmwareVersion:'1.1.1',
        DriveVersion:'1.8',
        ModuleVersion:'1.5.2',
        ChannelNumber:'8',
        StorageMethod:'硬盘',
        TotalSpace:'1024 GB',
        RemainingSpace:'512 GB',
      }
    }
  )
    const percentage = ref(20)
    const customColors = [
      { color: '#3b82f6', percentage: 90 },
      { color: '#f56c6c', percentage: 100 },
    ]

   const increase =()=> {
      percentage.value += 10
      if (percentage.value > 100) {
        percentage.value = 100
      }
    }

    const decrease = () => {
      percentage.value -= 10
      if (percentage.value < 0) {
        percentage.value = 0
      }
    }
    const el = ref(false)
    const el2 = ref(false)
    //page init
    onMounted(()=> {
      console.log("设备信息->请求：",info.value.data);
      el.value = true
    })
    //定时器1s
    const intervalId = setInterval(() => {
      console.log('定时器:update 磁盘使用量');
    }, 1000);
    
    onUnmounted(() => {
      clearInterval(intervalId);
      
    });

  function show_info()
  {
    console.log("show_info")
    el2.value = true
  }

</script>

<style >
.tab_s{
    @apply pr-5 !important;
    align-self: center;
    text-align: end;
}

/* 入场起始样式 */
.v-enter-from {
    opacity: 0;
    transform: translateX(30px);
}
/* 入场过渡效果 */
.v-enter-active {
    transition: 2s all ease; 
}
/* 入场结束样式 */
.v-enter-to {
    opacity: 1;
}
/* 出场起始样式 */
.v-leave-from {
    opacity: 1;
}
/* 出场过渡效果 */
.v-leave-active {
    transition: 1s all ease; 
    position: absolute;
}
/* 出场结束样式 */
.v-leave-to {
    opacity: 0;
    transform: translateX(30px);
}
.v-move {
    transition: 2s all ease; 
}
</style>